<template>
	<view class="container">
		<Page :page-function="getBalanceDetailPage" v-model:dataList="balanceDetailList" v-model:page="page">
			<view class="balance-item" v-for="item in balanceDetailList" :key="item.id">
				<view class="up">
					<view class="channel">
						{{ getDriverBalanceTypeNameByCode(item.balanceType) }}
					</view>
					<view class="amount">
						{{ 
							[ driverBalanceTypeEnum.RECHARGE_INCOME.value, 
							  driverBalanceTypeEnum.DRIVE_INCOME.value,
							  driverBalanceTypeEnum.CHILD_INCOME.value,
							  driverBalanceTypeEnum.CHILD_VIP.value,
							  driverBalanceTypeEnum.OFFLINE_INCOME.value
							].includes(item.balanceType) ? '+' : '-'
						}}
						￥{{ formatAmount(item.amount) }}
					</view>
				</view>
				<view class="down">
					<view class="datetime">
						{{ formatDatetime(item.createTime) }}
					</view>
					<view class="ramaining-balance">
						余额 {{ formatAmount(item.remainingBalance) }}
					</view>
				</view>
			</view>
		</Page>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { getBalanceDetailPage } from '@/api/balance_detail.js'
import { formatDatetime } from '@/utils/datetimeUtil.js'
import { driverBalanceTypeEnum, getDriverBalanceTypeNameByCode } from '@/utils/enums.js'
import Page from '@/components/page.vue'
import { formatAmount } from '@/utils/amountUtil.js'

const balanceDetailList = ref([])

const page = reactive({
	pageNum: 1,
	pageSize: 10
})

</script>

<style scoped lang="scss">

view, div {
	box-sizing: border-box;
}

.container {
	min-height: 100vh;
	.balance-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ccc;
		.up {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.subject {
				
			}
			.amount {
				font-weight: bold;
				color: $uni-color-primary;
			}
		}
		.down {
			margin-top: 20rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.datetime {
				color: #666;
				font-size: 28rpx;
			}
			.ramaining-balance {
				color: #666;
				font-size: 28rpx;
			}
		}
		.btn-container {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn {
				font-size: 24rpx;
				padding: 10rpx 30rpx;
				border-radius: 8rpx;
			}
			.btn-pay {
				color: $uni-color-primary;
				background-color: rgba($uni-color-primary, 0.1);
				&:active {
					background-color: rgba($uni-color-primary, 0.15);
				}
			}
			.btn-cancel {
				margin-right: 20rpx;
				color: #333;
				background-color: rgba(#444, 0.1);
				&:active {
					background-color: rgba(#444, 0.15);
				}
			}
		}
		
	}
}

</style>